<template>
<div>
  <header class="header">
    <div class="h-l"><span><svg t="1650873269666" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1224" width="32" height="32"><path d="M387.84 164.906667a22.122667 22.122667 0 0 0-0.362667-30.72 20.522667 20.522667 0 0 0-29.674666 0.362666L0 512.853333l357.802667 378.282667c8.042667 8.533333 21.290667 8.746667 29.674666 0.341333 8.32-8.32 8.533333-22.016 0.384-30.72L60.330667 512.853333 387.861333 164.906667z" fill="#e6e6e6" p-id="1225"></path></svg></span></div>
    <div class="h-c">猫眼电影</div>
    <div class="h-r"></div>
  </header>
  <div class="me">
    <div class="phone"><input type="text" name="tell" id="" placeholder="请输入账号"></div>
    <div class="captcha"><input type="password" name="short" id="" placeholder="请输入密码"></div>
  </div>
  <div class="sign"><button @click="goPersonal">登录</button></div>
  <div class="agr">
   <div class="agr-1">
    <input type="checkbox" name="dianji" id=""><span class="und">我已阅读并同意</span><span class="ent">《猫眼用户服务协议》《隐私政策》</span>
    </div>
    <div class="agr-2"><span class="kefu">客服电话:</span><span class="dianhua">1010-5335</span></div>
    <div class="agr-3">未注册的手机号将自动生成新账号</div>
  </div>
  </div>
</template>

<script>

// import Personal from '/Personal.vue';
export default {
  methods:{
    goPersonal(){
      this.$router.push("/personal")
    }
  }
};
</script>

<style lang="less" scoped>
.header {
  width: 100%;
  height: 0.6rem;
  line-height: 0.6rem;
  background: #df2d2d;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-around;
  .h-l,
  .h-r {
    width: 20%;
  }
  .h-l {
    margin-left: .2rem;
    .icon{
      margin-top: 15px;
      
    }
  }
  span{
    font-size: 20px;
    color: #fff;
  }
  .h-c {
    width: 60%;
    font-size: 18px;
    color: #fff;
    text-align: center;
  }
  .h-r{
        height: 0.6rem;
      line-height: 0.6rem;
        text-align: right;
  }
}
.me{
  width: 100%;
  // height: 4rem;
  margin-top: 45px;
  // background: pink;
  .phone{
    width: 100%;
    height: 0.6rem;
    line-height: 0.6rem;
    input{
      width: 5.3333rem;
      height: 0.4rem;
      border: none;
      margin-left: 20px;
    }
  }
   .captcha{
    width: 100%;
    height: 0.6rem;
    line-height: 0.6rem;
    input{
      width: 5.3333rem;
      height: 0.4rem;
      border: none;
      margin-left: 20px;
    }
  }
}
.sign{
  width: 100%;
  height: 50px;
  text-align: center;
  button{
    width: 3rem;
    height: 0.4rem;
    border-radius: 30px;
    background: rgb(223, 221, 221);
    color: rgb(155, 153, 153);
    border: none;
  }
}
.agr{
  width: 100%;
  height: 1.3333rem;
  text-align: center;
  margin-top: 30px;
  font-size: 14px;
  .agr-1{
    margin-bottom: 5px;
    .und{
    color: #999;
  }
  .ent{
    color: #df2d2d;
  }
  }
 
  .agr-2{
     margin-bottom: 5px;
    .kefu{
    color: #999;
  }
  .dianhua{
    color: #df2d2d;
  }
  }
  
  .agr-3{
    color: #999;
    margin-top: .2667rem;
  }
}
</style>